<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>随机密码生成器</title>
  <link rel="stylesheet" href="./style.css">
</head>

<body class="gradient-animation">
  <div class="container">
    <h1>随机密码生成器</h1>
    <form id="generatorForm">
      <label for="quantity">生成数量:</label>
      <input type="number" min="1" max="100" value="6" step="1" id="quantity" required><br>

      <label for="lengthRange">长度范围:</label>
      <input type="number" min="4" max="18" value="12" step="1" id="minLength" required>
      ~
      <input type="number" min="4" max="20" value="18" step="1" id="maxLength" required><br>

      <label for="charset">字符集:</label>
      <div id="charsetOptions">
        <input type="checkbox" id="numbers" checked>
        <label for="numbers">数字</label>
        <input type="checkbox" id="lowercase" checked>
        <label for="lowercase">小写字母</label>
        <input type="checkbox" id="uppercase" checked>
        <label for="uppercase">大写字母</label>
        <input type="checkbox" id="symbols" checked>
        <label for="symbols">常用符号</label>
      </div>

      <button type="submit">生成</button>
    </form>

    <pre id="result">等待生成</pre>
  </div>

  <script src="generator.js"></script>
</body>

</html>